<template>
  <el-card>
    <div class="header">
      <h2>会议室信息管理</h2>
      <el-button @click="goBack">返回列表</el-button>
    </div>

    <el-form :model="form" label-width="100px" style="max-width: 600px">
      <el-form-item label="园区">
        <el-input v-model="form.garden" placeholder="例如：A区" />
      </el-form-item>
      <el-form-item label="楼号">
        <el-input v-model="form.buildNum" placeholder="例如：A1" />
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="form.roomNum" placeholder="例如：101" />
      </el-form-item>
      <el-form-item label="容纳人数">
        <el-input-number v-model="form.bedNum" :min="1" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch v-model="form.status" active-text="可用" inactive-text="禁用" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveRoom">保存</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

interface Room {
  garden: string
  buildNum: string
  roomNum: string
  bedNum: number
  status: boolean
}

const router = useRouter()
const form = ref<Room>({
  garden: '',
  buildNum: '',
  roomNum: '',
  bedNum: 10,
  status: true
})

const saveRoom = () => {
  // 这里应该调用API保存数据
  ElMessage.success('会议室添加成功')
  goBack()
}

const goBack = () => {
  router.push('/house/list')
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>